<!DOCTYPE html>
<html>
    <head>
        <title>MEdia</title>
        <link rel="stylesheet" type="text/css" href="pageLayout.css" />
        <style type="text/css">
            .minbody     {height:1090px;}
            .fcontainer{
                height:950px;
                width:100%-100px;
                background-color:#ffffff;
                padding:50px;
                margin-top:-50px;
            }
            .registerheader{
                font-size:20px;
                color:#0099ff;
            }
            .reglabel{
                font-size:30px;
                font-family:'Intro';
                color:#0099ff;
            }
            .formtable{
                margin-left:20px;
            }
            .formtable td{
                width:300px;
                overflow:hidden;
            }
            .formtable span{
                font-size:10px;
                font-family:'Segoe UI';
                color:red;
            }
        </style>
        <script type="text/javascript" src="jquery-latest.pack.js"></script>
        <script type="text/javascript" src="javascript.js"></script>
        <script type="text/javascript" src="registervalidation.js"></script>
    </head>
    <body>
        <?php
        // put your code here
        ?> 
        <div class="mainheader">
            <div class="minheader">
                <div class="outsideheader">
                    <div class="navbar">
                        <ul>
                            <li><a href='index.html'><img src="images/logo.png"/></a></li>
                            <li><a href='categories.html'>books</a></li>
                            <li><a href='categories.html'>music</a></li>
                            <li><a href='categories.html'>movies</a></li>
                            <li><a href=''>about</a></li>
                            <li><a href=''>contact</a></li>
                            <li><form><input id="search" type="text" value="Search" onfocus="clearText(this)" onBlur="checkIfEmpty(this)"/></form></li>
                        </ul>
                    </div>
                    <div id="accountbar">
                        <div class="accountbutton">
                            <span>0</span>
                            <div id="cartitemphrasecontainer">
                                <a id="cartitemsphrase">cart items</a>
                            </div><br><br>
                            <a>check out</a>
                        </div>

                        <div onmouseover="unhideLogin()" onmouseout="hideLogin()" class="accountbutton" id="logreg">
                            <a id="logregphrase">login/<br>register</a>
                        </div>

                        <div id="logregarea">
                            <div id="login" onmouseover="unhideLogin()" onmouseout="hideLogin()">
                                <form method="POST" action="LoginAction.php">
                                    <a>Username</a><br><input type="text"/><br>
                                    <a>Password</a><br><input type="password"/><br>
                                    <input type="checkbox"/>
                                    <a>Keep me logged in</a>
                                    
                                    <input type="submit">
                                </form>
                            </div>
                            <div id="registerbutton" onmouseover="unhideLogin()" onmouseout="hideLogin()"><a href="register.html">Register</a></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="mainbody">
            <div class="minbody">
                <div class="fcontainer">
                    <a class="reglabel">Registration form</a>
                    <form name="registerform" method="POST" action="source/Actions/RegisterAction.php">
                        <a class="registerheader">Personal information</a>
                        <table class="formtable">
                            <tr><td><a>First Name</a></td><td><input type="text" name="fname" id="fname" onblur="validatefName()"/></td><td><span id="fnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Middle Initial</a></td><td><input type="text" name="mname" id="mname" onblur="validatemName()"/></td><td><span id="mnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Last Name</a></td><td><input type="text" name="lname" id="lname" onblur="validatelName()"/></td><td><span id="lnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                        </table><br>

                        <a class="registerheader">Account information</a>
                        <table class="formtable">
                            <tr><td><a>Username</a></td><td><input type="text" name="username" id="username" onblur="validateuserName()"/></td><td><span id="usernameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Password</a></td><td><input type="password" name="password" id="password" onblur="validatepassword()"/></td><td><span id="passwordError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Repeat Password</a></td><td><input type="password" name="rpassword"  id="rpassword" onblur="validaterpassword()"/></td><td><span id="rpasswordError" style="display: none;">PASSWORD DOES NOT MATCH!!</span></td></tr>
                            <tr><td><a>E-mail</a></td><td><input type="text" name="email" id="email" onblur="validateEmail(value)"/></td><td><span id="emailError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                        </table><br>
                        
                        <a class="registerheader">Credit Card information</a>
                        <table class="formtable">
                            <tr><td><a>Credit or debit card number</a></td><td><input type="text" name="cardnumber" id="cardnumber" onblur="validatecardnumber()" onkeypress="return isNumberKey(event)"/></td><td><span id="cardnumberError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Card type</a></td>
                            <td><select name="cardtype">
                                <option value="visa">Visa</option>
                                <option value="master">Master Card</option>
                            </select></td></tr>
                            <tr><td><a>First Name</a></td><td><input type="text" name="ccfname" id="ccfname" onblur="validateccfName()"/></td><td><span id="ccfnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Middle Initial</a></td><td><input type="text" name="ccmname" id="ccmname" onblur="validateccmName()"/></td><td><span id="ccmnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Last Name</a></td><td><input type="text" name="cclname" id="cclname" onblur="validatecclName()"/></td><td><span id="cclnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Expiration date</a></td>
                            <td><select name="creditcardmonth">
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                            <select name="creditcardyear">
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                            </select></td></tr>
                        </table><br>

                        <a class="registerheader">Billing Address</a>
                        <table class="formtable">
                            <tr><td><a>House No.</a></td><td><input type="text" name="bhouse" id="house" onblur="validatehouseNo()" onkeypress="return isNumberKey(event)"/></td><td><span id="houseError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Street</a></td><td><input type="text" name="bstreet" id="street" onblur="validatestreet()"/></td><td><span id="streetError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Subdivision</a></td><td><input type="text" name="bsubdivision" id="subdivision" onblur="validatesubdivision()"/></td><td><span id="subdivisionError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>City</a></td><td><input type="text" name="bcity" id="city" onblur="validatecity()" /></td><td><span id="cityError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Postal Code</a></td><td><input type="text" name="bpostalcode" id="postalcode" onblur="validatepostalCode()" onkeypress="return isNumberKey(event)" /></td><td><span id="postalcodeError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Country</a></td><td><input type="text" name="bcountry" id="country" onblur="validateCountry()"/></td><td><span id="countryError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                        </table><br>
                        
                        <a class="registerheader">Delivery Address</a>
                        <table class="formtable">
                            <tr><td><a>House No.</a></td><td><input type="text" name="dhouse" id="dhouse" onblur="validatedhouseNo()" onkeypress="return isNumberKey(event)"/></td><td><span id="dhouseError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Street</a></td><td><input type="text" name="dstreet" id="dstreet" onblur="validatedstreet()"/></td><td><span id="dstreetError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Subdivision</a></td><td><input type="text" name="dsubdivision" id="dsubdivision" onblur="validatedsubdivision()"/></td><td><span id="dsubdivisionError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>City</a></td><td><input type="text" name="dcity" id="dcity" onblur="validatedcity()"/></td><td><span id="dcityError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Postal Code</a></td><td><input type="text" name="dpostalcode" id="dpostalcode" onblur="validatedpostalCode()" onkeypress="return isNumberKey(event)"/></td><td><span id="dpostalcodeError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                            <tr><td><a>Country</a></td><td><input type="text" name="dcountry" id="dcountry" onblur="validatedCountry()"/></td><td><span id="dcountryError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span></td></tr>
                        </table><br>

                        <input type="submit"/>
                    </form>
                </div>
            </div>
        </div>

        <div class="mainfooter"> 
            <div class="minfooter">
            </div>
        </div>
    </body>
</html>
